<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 1. 如何侦测一个对象的变化
        function defineReactive (data, key, val) {
            Object.defineProperty(data, key, {
                enumerable: true,
                configurable: true,
                get: function () {
                    // 读取触发get
                    return val
                },
                set: function (newVal) {
                    // 修改触发set
                    if (val === newVal) {
                        return
                    }
                    val = newVal
                }
            })
        }
        let xhg = {
            height: 180
        }
        defineReactive(xhg, 'height', 190)
        console.log(xhg.height, 'xhg.height');

    </script>
</body>
</html>
